<template>
    <div class="pay-wrapper">
        <!-- 内容层 -->
        <div v-if="showshi" class="pay-content-wrapper">
            <div class="course-wrapper">
              <div class="imgwrapper">
                <img class="" :src="listData.url" alt="images">
              </div>
              <div class="infowraper">
                <div class="coursename">
                  <p class="coursename-text" v-text="listData.name"></p>
                </div>
                <div class="thisdata">
                  <p>包含课程</p>
                  <div class="courseitems">
                    <span class="itemname" v-for="(item, index) in listData.courses" :key="index" v-text="item.name"></span>
                      <!-- <span class="itemprice"  v-text="`￥`+item.price"></span> -->    
                  </div>
                </div>
                <div></div>
              </div>
            </div>
            <div class="payment-wrapper">
              <div v-if='payDataList.price*1 != 0' class="pay-total-price">
                <span class="pay-text">实付：</span>
                <i class="icon">￥</i>
                <span class="price" >{{ (payDataList.price*1).toFixed(2) }}</span>
                <!--<div class="agreewrapper">-->
                  <!--<p class="agreetext">点击提交订单代表您已经阅读并同意<span>《国科学院学员课程合同》</span></p>-->
                <!--</div>-->
              </div>
              <div v-if='payDataList.price*1 == 0' class="pay-total-price isfree">免费试听</div>
            </div>
            <div class="btn-wrapper">
              <el-button @click.once="passData" :loading='loadingBool' class="btnspec submit">{{subText}}</el-button>
              <a @click.once="countConsult" :href="`http://wpa.qq.com/msgrd?v=3&uin=${QQNum}&site=qq&menu=yes`" target="_blank" class="btnspec consult">立即咨询</a>
              <!-- <router-link :to='{name: "payDetails",params:{detailsData:payDataList}}' class="submit">提交订单</router-link> -->
            </div>
        </div>
        <div v-else class="noResult">
          <img src="../../images/xiajiazhuangtai.png" width="108px" height="142px"/>
          <p>该套餐已下架</p>
        </div>
    </div>
</template>

<script>
import { courseDetail, orderIsPay, userInfo, passOrder, checkCluesInfo, signUpFree, statisticsSave } from '../../api/getData'
import { mapGetters, mapActions } from 'vuex'
import * as opreate from 'api/getData'
export default {
  mounted() {
    courseDetail(this.$route.query.courseId).then(data => {
      this.listData = data
      this.$set(this.payDataList, 'price', data.price)
      this.totalPriceFn()
      this.subText = this.payDataList.price * 1 > 0 ? '提交订单' : '点击报名'
    })

  },
  data() {
    return {
      payDataList: {
        price: 0,
        name: '',
        order: 0
      },
      listData: {},
      formData: {},
      loadingBool: false,
      subText: '提交订单',
      showshi:true
    }
  },
  computed: {
    User() {
      return this.$store.state.currentUser
    },
    ...mapGetters(['currentUser', 'cityId', 'cityName', 'QQNum'])
  },
  methods: {
    ...mapActions(['setSupplyflag', 'setNeedPayBool']),
    totalPriceFn() {
      let that = this
      that.payDataList.name = that.listData.name
      that.payDataList.order = that.listData.createdAt
    },
    countConsult(){
      let userId = this.currentUser && this.currentUser.cluesOrStuId || '',
        account = this.currentUser && this.currentUser.account || '',
        cityId = this.cityId && this.cityId || '',
        cityName = this.cityName && this.cityName || ''

      statisticsSave(cityId, cityName, userId, account)
    },
    passData() {
      opreate.courseDetail(this.$route.query.courseId).then(res => {
          console.log(res)
          if(res!=null)
          {
              this.loadingBool = true
              orderIsPay(this.User.type, this.User.cluesOrStuId.toString()).then(res => {
                if (res.msg === '0') {
                  this.loadingBool = false
                  this.$alert('您存在未支付的订单，请先完成支付', '提交失败', {
                    confirmButtonText: '确定',
                    beforeClose: (action, alert, done) => {
                      if (action === 'confirm') {
                        this.setNeedPayBool(true)
                        this.$router.push({ path: '/personal', query: { flag: 1, courseId: this.$route.query.courseId } })
                        done();
                      } else {
                        done();
                      }
                    },
                  });
                } else if(res.msg === '1'){
                  this.loadingBool = false
                  this.confirmInfo();
                }
              })
          }
          else
          {
            console.log(1)
            this.$alert('该套餐已下架，我们会努力上线新套餐！', '提示', {
              confirmButtonText: '确定',
              beforeClose: (action, alert, done) => {
                if (action === 'confirm') {
                  this.showshi=false
                  done();
                  }
                else{done();}
              }
            });
          }
      })
    },
    confirmInfo() {
      checkCluesInfo(this.User.type, this.User.cluesOrStuId.toString(), this.payDataList.price * 1 > 0 ? '1' : '0').then(res => {
        if (res.data.data.type === '0') {
          this.passOrder();
        } else if (res.data.data.type === '1') {
          this.$alert('个人信息完善度不足，请先前往完善', '完善信息', {
            confirmButtonText: '确定',
            beforeClose: (action, alert, done) => {
              if (action === 'confirm') {
                this.setSupplyflag(1);
                this.$router.push({ path: '/meRedact', query: { flag: 0, courseId: this.$route.query.courseId, campus:this.$route.query.campus} })
                done()
              } else {
                done();
              }
            },
          })
        } else if (res.data.data.type === '2') {
          this.$alert('个人信息完善度不足，请先前往完善', '完善信息', {
            confirmButtonText: '确定',
            beforeClose: (action, alert, done) => {
              if (action === 'confirm') {
                this.setSupplyflag(2);
                this.$router.push({ path: '/meRedact', query: { flag: 0, courseId: this.$route.query.courseId, campus:this.$route.query.campus } })
                done()
              } else {
                done();
              }
            },
          })
        }
        
      })
    },
    passOrder() {
      
      if (this.payDataList.price * 1 > 0) {
        passOrder(this.User.type, this.User.cluesOrStuId.toString(), this.listData.id.toString(),this.$route.query.campus).then(res => {
          this.$router.replace({ path: '/payDetails', query: {courseId: this.$route.query.courseId, orderSn: res.orderSn, requestBool: '0'} })
        })
      } else {
        signUpFree(this.User.type, this.User.cluesOrStuId, this.listData.id,this.$route.query.campus).then(res => {
          // this.$router.replace({ path: '/paySuccee', query: { textBool: '1' , name: this.toUnicodeFun('0') } })
          this.$router.replace({ path: '/paySuccee', query: { courseId: this.toUnicodeFun(this.$route.query.courseId.toString())} })
        })
      }

    },
    toUnicodeFun(data){
      var str =''; 
      for(var i=0;i<data.length;i++){
          str+="\\u"+data.charCodeAt(i).toString(16);
      }
      return str;
    }
  },

}
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
@import '~style/reset.styl';
.coursename-text{
  line-height: 34px;
  max-width: 750px;
  height 82px;
}
.noResult
    text-align center
    margin-top 56px
    p
      color $color-person-text
      margin-top 40px
      font-size $font-size-medium-x
    @extend .sWidth
    i
      font-size 181px
    @media (min-width: 1920px)
      margin-top 56px    
.pay-content-wrapper {
  width: 1200px;
  padding: 0 0px 81px 0px;
  margin: 50px auto;
  background-color: $color-text;

  .course-wrapper {
    height: 294px;
    .imgwrapper {
      width: 408px;
      height: 264px;
      font-size: 0px;
      display: inline-block;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .infowraper {
      display: inline-block;
      vertical-align: top;
      padding-left: 30px;
      .coursename {
        font-size: $font-size-large-l;
        color: $color-course-title;
        p {
          font-weight: bold;
        }
      }

      .thisdata {
        margin-top: 29px;
        font-size: $font-size-medium;
        color: $color-text-mt;
        p{
          margin-bottom: 20px;
        }
        .courseitems {
          max-width: 750px;
          .itemname {
            display: inline-block;
            color: $color-course-title;
            background:rgba(242,242,242,1);
            border-radius:2px;
            padding: 15px 20px;
            margin-right: 20px;
            margin-bottom: 20px;
          }
          .itemprice {
            color: $color-theme;
            margin-left: 22px;
          }
          
        }
      }
    }
  }

  .isfree {
    font-size: $font-size-large-xxl;
    color: $color-sub-pay;
  }
  .payment-wrapper {
    margin-top: 61px;
    margin-bottom: 58px;
    font-size: $font-size-medium;

    .pay-total-price {
      .pay-text {
        @extend .clear-default;
        height: 16px;
        line-height: 16px;
        color: $color-text-l;
      }

      .icon,.price {
        height: 16px;
        line-height: 16px;
        font-style: normal;
        font-weight: bold;
        font-size: $font-size-large-l;
        color: $color-sub-pay;
      }
      .agreewrapper {
        margin-top: 20px;

        .agreetext {
          @extend .clear-default;
          color: $color-text-ll;

          span {
            color: $color-theme;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }


  }

  .btn-wrapper {
    position: relative;

    .btnspec {
      display: inline-block;
      text-align: center;
      border-radius: 2px;
      cursor: pointer;
      background:rgba(255,239,237,1);
      border: 1px solid $color-sub-pay;
      color: $color-sub-pay;
      &:hover {
              background: $color-theme;
              color: $color-text;
            }
    }

    .submit {
      width: 144px;
      height: 44px;
      background-color: $color-sub-pay;
      color: $color-text;
      border: 1px solid $color-sub-pay;
      &:hover {
              background: $color-background-more;
              color: $color-text;
            }
    }

    .consult {
      position: absolute;
      left: 174px;
      width: 142px;
      height: 42px;
      line-height: 40px;

      &:hover {
        text-decoration: none;
      }
    }
  }
}
</style>

